---
title: Vue
description: Reglas de linting específicas para Vue.js en Ultracite.
---

La configuración de Vue incluye reglas de linting específicas para la estructura de componentes, las opciones de data, las propiedades computadas y las palabras reservadas. También incluye anulaciones para evitar falsos positivos de linting en archivos `.vue`.

## Instalación

Añade la configuración de Vue a tu `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/vue"]
}
```

## Resumen

Esta configuración añade reglas específicas para el desarrollo con Vue.js:

- **Soporte HTML**: Habilita soporte HTML experimental completo con indentación de script y style
- **Nomenclatura de Componentes**: Hacer cumplir nombres de componentes con varias palabras
- **Estructura de Data**: Evitar declaraciones inadecuadas de la opción data
- **Palabras Reservadas**: Prohibir el uso de props y claves reservadas de Vue
- **Claves Duplicadas**: Evitar claves duplicadas en las opciones del componente
- **Props Específicas de React**: Prohibir props específicas de React en componentes Vue
- **Anulaciones para Archivos Vue**: Reglas relajadas para archivos `.vue` para manejar la estructura de Single File Components

## Configuración del formateador HTML

El preset de Vue habilita soporte HTML experimental con un formateo especial para scripts y estilos embebidos:

```jsonc
{
  "html": {
    "experimentalFullSupportEnabled": true,
    "formatter": {
      "indentScriptAndStyle": true
    }
  }
}
```

Esta configuración:
- **Soporte Full Experimental**: Habilita las capacidades experimentales de parseo y formateo HTML de Biome para archivos `.vue`
- **Indentar Script y Style**: Indenta correctamente el código dentro de las etiquetas `<script>` y `<style>` en Single File Components de Vue

## Reglas específicas de Vue

### Experimental

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noVueDataObjectDeclaration` | `error` | Evita el uso de una declaración de objeto para la opción `data` en componentes de Vue. La opción `data` debe ser una función que devuelva un objeto. |
| `noVueDuplicateKeys` | `error` | Evita claves duplicadas en las opciones de componentes Vue. Las claves en `data`, `computed`, `methods`, etc., deben ser únicas. |
| `noVueReservedKeys` | `error` | Prohíbe claves reservadas de Vue como `$data`, `$props`, `$el`, etc., en las opciones del componente. |
| `noVueReservedProps` | `error` | Prohíbe props reservadas de Vue como `key`, `ref` e `is` como props personalizadas de componentes. |
| `noVueVIfWithVFor` | `error` | Prohíbe el uso de `v-for` y `v-if` en el mismo elemento. |
| `useVueHyphenatedAttributes` | `error` | Fomenta el uso de kebab-case para los nombres de atributos, según las recomendaciones de la guía de estilo de Vue. |
| `useVueMultiWordComponentNames` | `error` | Obliga a usar nombres de componentes de varias palabras para evitar conflictos con elementos HTML. Se deben evitar nombres de una sola palabra como `Button` o `Card`. |
| `useVueValidVBind` | `error` | Verifica la validez de las directivas `v-bind` en archivos Vue. |
| `useVueValidVElseIf` | `error` | Asegura directivas válidas `v-else-if` en plantillas Vue. Reporta directivas inválidas con expresiones condicionales faltantes o cuando no están precedidas por una directiva `v-if` o `v-else-if`. |
| `useVueValidVElse` | `error` | Asegura directivas válidas `v-else` en plantillas Vue. Reporta directivas que no están precedidas por una directiva `v-if` o `v-else-if`. |
| `useVueValidVHtml` | `error` | Asegura el uso válido de la directiva `v-html` en plantillas Vue. Reporta directivas con expresiones faltantes, argumentos inesperados o modificadores inesperados. |
| `useVueValidVIf` | `error` | Asegura directivas válidas `v-if` en plantillas Vue. Prohíbe argumentos y modificadores, y garantiza que se proporcione un valor. |
| `useVueValidVOn` | `error` | Asegura directivas válidas `v-on` / abreviatura `@` en plantillas Vue. Reporta directivas inválidas `v-on` / `@` con nombres de evento faltantes, modificadores inválidos o expresiones de manejador faltantes. |
| `useVueValidVText` | `error` | Asegura directivas válidas `v-text` en plantillas Vue. La regla reporta cuando `v-text` tiene un argumento, tiene modificadores o le falta un valor. |

### Sospechosos

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noReactSpecificProps` | `error` | Prohíbe props específicas de React como `className` y `htmlFor` en Vue. Usa `class` y `for` en su lugar. |

## Anulaciones para archivos Vue

Las siguientes reglas están deshabilitadas para archivos `.vue` para evitar falsos positivos debido al soporte parcial de Biome para los Single File Components de Vue:

### Corrección

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noUnusedVariables` | `off` | Permitir variables no utilizadas en archivos `.vue`. Las variables en la sección script pueden usarse únicamente en la plantilla. |
| `noUnusedImports` | `off` | Permitir imports no utilizados en archivos `.vue`. Los imports pueden utilizarse únicamente en la sección de plantilla. |

### Estilo

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `useConst` | `off` | Permitir declaraciones `let` y `var` en archivos `.vue` para patrones de datos reactivos. |
| `useImportType` | `off` | Deshabilitar los requisitos explícitos de tipo de import para una mejor compatibilidad con el sistema de compilación de Vue. |